@import '../../less/fn/_for';
@import '../../less/css3/_animation';
@import '../../less/css3/_transform';
@import '../../less/css3/misc/_box-sizing';
@import '../../less/css3/misc/_border-radius';

@boxBigDimension: 140px;
@boxSmallDimension: (@boxBigDimension / 2);
@border-radius: (@boxSmallDimension / 8);
@movement: (@boxBigDimension - @boxSmallDimension);
@boxMargin: 10px;
@animation-duration: 1000ms;
@animation-timing-function: linear;


*, *:before, *:after {
    .box-sizing(border-box);
    margin: 0;
    padding: 0;
}

body {
    background: #fff8c2;
}

#content {
    max-width: 960px;
    margin: 0 auto;
}

.box {
    height: @boxBigDimension;
    width: @boxBigDimension;
    margin:@boxMargin;
    background: #cec79c;
    position: relative;
    list-style: none;
    display: inline-block;
    .border-radius(@border-radius);
    overflow: visible;
    .perspective(700px);
    font-family: sans-serif;
    &:before {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        height: 30px;
        width: @boxBigDimension;
        line-height: 30px;
        text-align: center;
        color: #333226;
        font-weight: 700;
        font-size: 12px;
    }
}

.box-inner {
    height: @boxBigDimension;
    width: @boxBigDimension;
    background: #868692;
    position: absolute;
    display: block;
    .border-radius(@border-radius);
    z-index: 0;
    .transform-style(preserve-3d);

}

.back {
    height: @boxBigDimension;
    width: @boxBigDimension;
    position: absolute;
    display: block;
    .border-radius(@border-radius);
    .backface-visibility(hidden);
    background: #92646c;
}
@animations:

flip-x
@animation-duration
@animation-timing-function
infinite
none,

flip-y
@animation-duration
@animation-timing-function
infinite
none,

flip-z
@animation-duration
@animation-timing-function
infinite
none,

flip-xy
@animation-duration
@animation-timing-function
infinite
none,

flip-xyz
@animation-duration
@animation-timing-function
infinite
none,

fade-in-out
@animation-duration
@animation-timing-function
infinite
none,

beat
@animation-duration
@animation-timing-function
infinite
none;

.box {
    .for(@animations);.-each(@i) {
        @animation-name: extract(@i,1);
        @animation-duration: extract(@i,2);
        @animation-timing-function: extract(@i,3);
        @animation-iteration-count: extract(@i,4);
        @animation-fill-mode: extract(@i,5);

        &.@{animation-name}:hover .box-inner  {
            .animation(
                @animation-name
                @animation-duration
                @animation-timing-function
                @animation-iteration-count;);

            .animation-fill-mode(@animation-fill-mode);
        }

        &.@{animation-name}:before  {
            content: '@{animation-name}';
        }
    }
}
& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0% {@{transform}:rotateX(0deg)}";
    @step-2: "100% {@{transform}:rotateX(-360deg)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(flip-x;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0% {@{transform}:rotateY(0deg)}";
    @step-2: "100% {@{transform}:rotateY(-360deg)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(flip-y;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0% {@{transform}:rotate3d(0,0,1,0deg)}";
    @step-2: "100% {@{transform}:rotate3d(0,0,1,-360deg)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(flip-z;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0% {@{transform}:rotate3d(1,1,0,0deg)}";
    @step-2: "100% {@{transform}:rotate3d(1,1,0,-360deg)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(flip-xy;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0% {@{transform}:rotate3d(1,1,1,0deg)}";
    @step-2: "100% {@{transform}:rotate3d(1,1,1,-360deg)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(flip-xyz;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0%,100% {@{opacity}:0}";
    @step-2: "50% {@{opacity}:1}";
    .for(@vendorPrefixes);.-each(@i) {
        @opacity: '@{i}opacity';
        .keyframes-prevendored(fade-in-out;"@{step-1}@{step-2}";)
    }
}

& {
    @vendorPrefixes: -webkit-, -moz-, '';
    @step-1: "0%,30%,100%{@{transform}:scale(1)}";
    @step-2: "20%,50% {@{transform}:scale(1.2)}";
    .for(@vendorPrefixes);.-each(@i) {
        @transform: '@{i}transform';
        .keyframes-prevendored(beat;"@{step-1}@{step-2}";)
    }
}